<template>
  <div class="login">
    <img src="@/assets/img/common/login_bg.jpg" alt="" class="login_bg" />

    <div class="Mask">
      <div class="brand-info__text">无限开发平台</div>
      <div class="brand-info__intro">
        &nbsp;&nbsp;&nbsp;&nbsp;infinite基于Vue3.x、element-plus、TypeScript构建开发，实现后台管理前端功能，提供一套不错的前端解决方案。
      </div>
    </div>
    <div class="form">
      <h2 style="margin-top: 40%">管理员登录</h2>
      <el-input
        class="el-input-long account"
        placeholder="请输入账号"
        v-model="account"
      ></el-input>
      <el-input
        class="el-input-long pwd"
        placeholder="请输入密码"
        v-model="pwd"
        show-password
      ></el-input>
      <div class="code">
        <el-input
          class="el-inputCode"
          type="text"
          v-model="code"
          placeholder="请输入验证码"
        />
      </div>
      <div class="buttonBox">
        <div class="loginButton" @click="loginApi">登录</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { login } from "@/api/sys_user";
import { baseURL } from "@/api/request";
import { getUUID } from "@/utils/index";
import { getCookie, setCookie } from "../../utils/cookie";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const state = reactive({
      account: "admin",
      pwd: "123456",
      code: "",
      codeImg: "",
      show: false,
      uuid: "",
    });
    const Router = useRouter();
    const loginApi = () => {
      let form = new FormData();
      form.append("username", state.account);
      form.append("password", state.pwd);
      login(form).then((res: any) => {
        console.log(res);
        setCookie("token", res.msg);
        Router.push("/main");
      });
    };

    onMounted: {
    }
    return { ...toRefs(state), baseURL, loginApi };
  },
});
</script>

<style scoped lang="less">
.login {
  .login_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
  }
  .Mask {
    width: 70%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
  }
  .brand-info__text {
    position: fixed;
    top: 33%;
    left: 7%;
    z-index: 2;
    color: #fff;
    font-size: 48px;
    font-weight: bold;
  }
  .brand-info__intro {
    position: fixed;
    top: 43%;
    left: 7%;
    z-index: 2;
    color: #fff;
    font-size: 20px;
    line-height: 1.58;
    opacity: 0.6;
    width: 50%;
    text-align-last: left;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
  }
  .form {
    position: fixed;
    right: 0;
    width: 30%;
    top: 8%;
    .buttonBox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      .loginButton {
        width: 350px;
        height: 35px;
        color: #fff;
        border-radius: 5px;
        margin-top: 40px;
        background-color: #17b3a3;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
      }
    }
  }
  h2 {
  }
  .account {
  }
  .pwd {
    margin-top: 20px;
  }
  .el-input-long {
    width: 350px;
    height: 36px;
  }
  .code {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-inputCode {
      width: 195px;
      height: 36px;
    }
    .codeImg {
      width: 134px;
      height: 33px;
      margin-left: 20px;
    }
  }
}
</style>